<template>
  <div class="">
    <!-- tab切换 -->
    <div class="tab_class">
      <div class="tab_box">
        <i class="fa fa-reply tab_li" @click="cancel"></i>
        <div
          class="tab_li"
          v-for="(item, index) in tabData"
          :key="item.id"
          :class="{ tabsactive: showOne === index }"
          @click="tabChange(index)"
        >
          {{ item.value }}
        </div>
      </div>
    </div>
    <!-- 切换内容 -->
    <partake ref="partake" v-show="showOne == '0'"></partake>
    <reward ref="reward" v-show="showOne == '1'"></reward>
  </div>
</template>

<script>
import partake from './partake'
import reward from './reward'
export default {
  name: 'partakeReward',
  components: {
    partake,
    reward,
  },
  data() {
    return {
      tabData: [
        {
          id: 1,
          value: '参与用户',
        },
        {
          id: 2,
          value: '奖励记录',
        },
      ],
      showOne: '0',
    }
  },
  created(){
    // this.showOne = '0'
    // 选中参与用户
    this.tabChange(0)
  },
  methods: {
    tabChange(indexs) {
      //tab切换
      const vm = this
      this.showOne = indexs
      if (indexs == '0') {
        vm.$nextTick(() => {
          vm.$refs.partake.searchList();
        })
      } else {
        vm.$nextTick(() => {
          vm.$refs.reward.searchList();
        })
      }
    },
    // 返回按钮
    cancel() {
      this.$router.go(-1)
    },
  },
}
</script>

<style lang="less" scoped>
.tab_class {
  margin: 20px 0 20px 30px;
}

.tabsactive {
  color: #1890ff !important;
  border-bottom: 2px solid #1890ff;
  font-size: 14px;
}

.tab_box {
  overflow: hidden;
}

.fa-reply{
  margin-top: 4px;
}
.tab_li {
  float: left;
  font-size: 14px;
  color: #606266;
  box-sizing: border-box;
  padding: 10px 0px 5px 0px;
  margin-right: 20px;
}

.tab_li:hover {
  color: #1890ff;
  cursor: pointer;
}
</style>